<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式</title>
    <script language="javascript" src="../glq/jquery-3.6.0.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="../glq/bg.css"/>
</head>
<body>
      <table>      
        <tr>  
            <td >商品名</td>  
            <td>商品价格</td>  
            <td>商品数量</td>    
          </tr>  
          <tr>    
            <td>美白滋养露</td>  
            <td>120</td>  
            <td>100</td>  
          </tr>  
          <tr>  
            <td>美白润体乳</td>  
            <td>80</td>  
            <td>60</td>  
          </tr>  
          <tr>  
            <td>美白面膜</td>  
            <td>68</td>  
            <td>40</td>  
          </tr> 
          <tr>  
              <td>美白柔肤水</td>  
              <td>100</td>  
              <td>200</td>  
            </tr>   
            <tr>  
              <td>美白日霜</td>  
              <td>68</td>  
              <td>300</td>  
            </tr> 
            <tr>  
              <td>美白眼膜</td>  
              <td>98</td>  
              <td>100</td>  
            </tr> 
            <tr class="zh">
              <td></td>
              <td></td>
               <td>共6件商品</td> 
            </tr>  
  </table>  
  <script type="text/javascript">  
      $(document).ready(function() {  
            $("tr:even").addClass("even");                    //设置奇数行所用的CSS类  
            $("tr:odd").addClass("odd");                       //设置偶数行所用的CSS类  
            $("tr:first").removeClass("even");               //移除even类  
            $("tr:first").addClass("th");                 //添加th类  
            $("tr:eq(5)").addClass("eq");
      });  
</script>  
</body>
</html>